Dear _________,I hope your day is going well! My name is _________, and I'm a _________ at _________. I am very interested in working for _________ next _________. Your commitment to _________ and _________ that I saw on the website inspired me! The products you build and the values you stand for make _________ seem like an ideal workplace for me. A little about me, I [insert relevant work experience, extracurriculars, and projects here]. I think these experiences would make me a great candidate for you. Please let me know if there's anything else you need from me. I look forward to hearing from you! I can be reached at _________ and _________ Best regards,
Curated list of websites and resources to find work programming
O(1)
Runtime is constant and does not
grow with n
O(log n)
Runtime grows logarithmically in
proportion to n
O(n)
Runtime grows directly in
proportion to n
O(n log n)
Runtime grows in proportion and
logarithmically to n
O(n^c)
Runtime grows quicker than
previous all based on n
O(c^n)
Runtime grows even faster than
polynomial growth based on n
O(n!)
Runtime grows the fastest and
becomes quickly unusable for
even
n
n log n
.
O(1), Dynamic array: O(1)
O(n), Dynamic array: O(n)
O(log n), Dynamic array: O(log n)
O(n)
O(n)
O(n)
O(n)
O(1)
O(1)
O(n)
O(1)
O(1)
O(1)
O(log n)
O(log n)
O(log n)
O(n^2)
O(n^2)
O(n^2)
O(1)
O(n^2), in practice it slightly less
since its comparison scheme only
requires checking place if its
smaller than its neighbor.
O(n)
O(n^2)
O(n^2)
O(n)
O(n log n)
O(n log n)
O(n)
O(1)
O(n^2)
O(n log n)
O(n log n)
O(log n)
alt
attribute on images?
alt
attribute provides alternative
information for an image if a user
cannot view it. The alt
attribute should be used to describe any
images except those which only serve a
decorative purpose, in which case it
should be left empty.
alt
attribute.
alt
tags to understand image
content, so they are considered
important for Search Engine
Optimization (SEO).
.
at the end of alt
tag to improve
accessibility.
defer
and async
attributes on a <script>
tag?
defer
attribute downloads the script while the
document is still parsing but waits
until the document has finished parsing
before executing it, equivalent to
executing inside a DOMContentLoaded
event listener. defer
scripts will execute in order. The async
attribute downloads the script during
parsing the document but will pause the
parser to execute the script before it
has fully finished parsing. async
scripts will not necessarily execute in
order. Note: both attributes must only
be used if the script has a src
attribute (i.e. not an inline
script).
defer
script in the <head>
allows the browser to download
the script while the page is
still parsing, and is therefore
a better option than placing the
script before the end of the
body.
defer.
async.
defer
if the DOM must be ready and the
contents are not placed within a DOMContentLoaded
listener.
async
function?
async
function is a function that allows you
to pause the function's execution
while it waits for ( await
s) a promise to resolve. It's an
abstraction on top of the Promise API
that makes asynchronous operations look
like they're synchronous. async
functions automatically return a Promise
object. Whatever you return
from the async
function will be the promise's resolution. If instead you throw
from the body of an async
function, that will be how your async
function rejects
the promise it returns. Most
importantly, async
functions are able to use the await
keyword in their function body, which pauses the function
until the operation after the await
completes, and allows it to return that
operation's result to a variable
synchronously.
async
functions are just syntactic
sugar on top of Promises.
async
function returns, and reject to
whatever your async
function throws.
batches
that returns the maximum number of
whole batches that can be cooked from
a recipe.
Object.keys()
to return the ingredients of the recipe
as an array, then use Array.prototype.map()
to map each ingredient to the ratio of
available units to the amount required
by the recipe. If one of the ingredients
required by the recipe is not available
at all, the ratio will evaluate to NaN
, so the logical OR operator can be used
to fallback to 0
in this case. Use the spread ...
operator to feed the array of all the
ingredient ratios into Math.min()
to determine the lowest ratio. Passing
this entire result into Math.floor()
rounds down to return the maximum number
of whole batches.
navbar
is the Block, navbar__link
is an Element that makes no sense
outside of the navbar
component, and navbar__link--active
is a Modifier that indicates a different
state for the navbar__link
Element. Since Modifiers are verbose,
many opt to use is-*
flags instead as modifiers.
1ms
.
1ms
1000ms
1ms <= x <= 1000ms
10000ms
sort()
method and the average time complexity
of quicksort is O(NlgN). This is very
efficient for large collections.
1000000ms
Infinity
(practically) ms
bind
that is functionally equivalent to the
method Function.prototype.bind
.
...
operator. From that function, return the
result of calling the fn
with Function.prototype.apply
to apply the context and the array of
arguments to the function.
src="js/script.js"
=> src="js/script.js?v=2"
async/await
is usually the best option. Instead of
supplying the functions with callbacks
that cause deep nesting, they return a
promise that can be await
ed and will be resolved once the data
has arrived, allowing the next line of
code to be evaluated in a sync-like
fashion. The above code can be
restructured like so:
setState
?
setState
has finished and the component gets
rendered. Since setState
is asynchronous, the callback function
is used for any post action.
setState
finishes and is used for any
post action.
findDOMNode()
API, due to the fact that findDOMNode()
prevents certain improvements in React
in the future.
findDOMNode().
map
function takes a callback function that
is invoked synchronously for each
iteration of the loop (array
element).
children
prop?
children
is part of the props object passed to
components that allows components to be
passed as data to other components,
providing the ability to compose
components cleanly. There are a number
of methods available in the React API to
work with this prop, such as React. Children.map
, React. Children.forEach
, React. Children.count
, React.Children.only
and React. Children.toArray
. A simple usage example of the children
prop is as follows:
className
instead of class
like in HTML?
class
on an element meant using the className
API:
class
can
be used as a prop without problems, as
seen in other libraries like Preact.
React currently allows you to use class
, but will throw a warning and convert
it to className
under the hood. There is currently an
open thread (as of January 2019)
discussing changing className
to class
to reduce confusion.
...
, the object's own enumerable
properties can be copied into the new
object. This creates a shallow clone of
the object.
JSON.parse(JSON.stringify(obj))
can be used to deep-clone a
simple object, but it is
CPU-intensive and only accepts
valid JSON (therefore it strips
functions and does not allow
circular references).
Object.assign({}, obj)
is another alternative.
Object.keys(obj).reduce((acc,
key) => (acc[key] = obj[key],
acc), {})
is another more verbose
alternative that shows the
concept in greater depth.
==
or ===
. This is because they are being
compared by their reference (location in
memory), unlike primitive values which
are compared by value. In order to test
if two objects are equal in structure, a
helper function is required. It will
iterate through the own properties of
each object to test if they have the
same values, including nested objects.
Optionally, the prototypes of the
objects may also be tested for
equivalence by passing true
as the 3rd argument. Note: this
technique does not attempt to test
equivalence of data structures other
than plain objects, arrays, functions,
dates and primitive values.
http://mydomain.com
that uses AJAX to make a request for http://yourdomain.com
. For security reasons, browsers
restrict cross-origin HTTP requests
initiated by JavaScript. XMLHttpRequest
and fetch
follow the same-origin policy, meaning a
web application using those APIs can
only request HTTP resources from the
same origin the application was
accessed, unless the response from the
other origin includes the correct CORS
headers.
Content
: The inner-most part of the box filled
with content, such as text, an image, or
video player. It has the dimensions content-box width
and content-box height
. Padding
: The transparent area surrounding the
content. It has dimensions padding-box width
and padding-box height
. Border
: The area surrounding the padding (if
any) and content. It has dimensions border-box width
and border-box height
. Margin: The transparent outer-most layer that
surrounds the border. It separates the
element from other elements in the DOM.
It has dimensions margin-box width
and margin-box height
.
lighten
, darken
, transparentize
, etc), mixins, and loops that make CSS
more like a real programming language
and gives the developer more power to
generate complex CSS.
~
selects all elements that are siblings
of a specified element. The following
example selects all <p>
elements that are siblings of <div>
elements:
+
selects all elements that are the
adjacent siblings of a specified
element. The following example will
select all <p>
elements that are placed immediately
after <div>
elements:
<head>
with a defer
attribute, or inside a DOMContentLoaded
event listener. Scripts that
manipulate DOM nodes should be
run after the DOM has been
constructed to avoid
errors.
document.getElementById()
and document.querySelector()
are common functions for
selecting DOM nodes.
innerHTML
property to a new value runs the
string through the HTML parser,
offering an easy way to append
dynamic HTML content to a
node.
==
and ===
?
===
) checks for strict equality, which
means both the type and value must be
the same. Double equals ( ==
) on the other hand first performs type
coercion so that both operands are of
the same type and then applies strict
comparison.
==
can have unintuitive
results.